var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineWidth = 10;
ctx.stroke();

ctx.beginPath();
ctx.moveTo(110, 10);
ctx.lineTo(160, 10);
ctx.lineWidth = 20;
ctx.stroke();
var lineCaps = ["butt", "round", "square"];

for (var i = 0; i < 3; i++) {
  ctx.beginPath();
  ctx.moveTo(20 + 30 * i, 30);
  ctx.lineTo(20 + 30 * i, 100);
  ctx.lineWidth = 20;
  ctx.lineCap = lineCaps[i];
  ctx.stroke();
}

ctx.beginPath();
ctx.moveTo(0, 30);
ctx.lineTo(300, 30);

ctx.moveTo(0, 100);
ctx.lineTo(300, 100);

ctx.strokeStyle = "red";
ctx.lineWidth = 1;
ctx.stroke();
var lineJoin = ["round", "bevel", "miter"];
ctx.lineWidth = 20;

for (var i = 0; i < lineJoin.length; i++) {
  ctx.lineJoin = lineJoin[i];
  ctx.beginPath();
  ctx.moveTo(50, 50 + i * 50);
  ctx.lineTo(100, 100 + i * 50);
  ctx.lineTo(150, 50 + i * 50);
  ctx.lineTo(200, 100 + i * 50);
  ctx.lineTo(250, 50 + i * 50);
  ctx.stroke();
}
